<template>
  <div style="margin-top:20px;">
    <Card style="max-width: 1000px; margin: 0 auto">
      <Upload
        type="drag"
        :action="uploadFileUrl"
        :headers="accessToken"
        :on-success="handleSuccess"
        :on-error="handleError"
        :format="format"
        :accept="accept"
        :show-upload-list="false"
        :on-format-error="handleFormatError"
        :before-upload="handleUpload"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或者拖拽要打印的文件至此，仅支持格式 {{ accept }}</p>
        </div>
      </Upload>
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
      >
        <FormItem label="打印文件：" prop="name">
          <Input v-model="formValidate.name" readonly></Input>
        </FormItem>
        <FormItem label="选择打印机：" prop="printIndex">
          <Select
            v-model="formValidate.printIndex"
            placeholder="请选择打印机："
            @on-change="changeprint"
          >
            <Option
              :value="index"
              v-for="(item, index) in allPrint"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </FormItem>
         <FormItem label="打印份数：" prop="num">
          <Input v-model="formValidate.num"></Input>
        </FormItem>
        <FormItem label="打印机位置：">
          <div>{{ currentPrint.address }}</div>
        </FormItem>
        <FormItem label="打印颜色：">
          <div>黑白打印</div>
        </FormItem>
       
        <FormItem label="单份打印页数：">
          <div>{{ docdetail.pageNum }}</div>
        </FormItem>
        <FormItem label="单价：">
          <div>{{ currentPrint.price }}元/张</div>
        </FormItem>
        <FormItem label="总价：" v-if="docdetail.pageNum &&  currentPrint.price && formValidate.num">
          <div>{{ docdetail.pageNum * currentPrint.price*formValidate.num }}元</div>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')"
            >点击支付</Button
          >
        </FormItem>
      </Form>
    </Card>
    <Modal
        v-model="showqrcode"
        title="支付打印费用"
       >
        <div style="text-align:center">
          <img :src="qrcode" alt="" style="height:200px;width:200px;">
        </div>
        <div slot="footer">
          
        </div>
    </Modal>
  </div>
</template>

<script>
import {
  uploadFile,
  getfilepageById,
  getscPrintAll,
  scPrintRecordAdd,
} from "@/api/index";
//import QRCode from "qrcodejs2";
export default {
  name:"webprint",
  data() {
    return {
      qrcode:"",
      showqrcode:false,
      accessToken: {},
      uploadFileUrl: uploadFile,
      // accept: ".doc, .docx, .xls, .xlsx, .pdf",
      // format: ["doc", "docx", "xls", "xlsx", "pdf"],
      accept: ".doc, .docx",
      format: ["doc", "docx"],
      docdetail: {
        fileName: "",
        pageNum: null,
      },
      allPrint: [],
      currentPrint: {},
      formValidate: {},
      ruleValidate: {
        name: [
          {
            required: true,
            message: "请选择要打印的文件",
            trigger: "blur",
          },
        ],
        printIndex: [
          {
            required: true,
            message: "请选择打印机",
            trigger: "change",
            type: "number",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入打印份数",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    changeprint(index) {
      console.log(index);
      this.currentPrint = this.allPrint[index];
    },
    handleSubmit(name) {
      console.log(this.formValidate);
      this.$refs[name].validate((valid) => {
        if (valid) {
          scPrintRecordAdd({
            ...this.formValidate,
            fileUrl: this.docdetail.fileUrl,
            printId: this.currentPrint.id,
            pageNum: this.docdetail.pageNum,
          }).then((res) => {
            console.log(res);
            this.qrcode = res.result;
            this.showqrcode = true
            // new QRCode(this.$refs.qrCodeDiv, {
            //   text:res.result,
            //   width: 200,
            //   height: 200,
            //   colorDark: "#333333", //二维码颜色
            //   colorLight: "#ffffff", //二维码背景色
            //   correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
            // });
          });
        } else {
          this.$Message.error("请按要求填写");
        }
      });
    },
    init() {
      getscPrintAll().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.allPrint = res.result;
        }
      });
    },
    handleUpload(){
      this.$Loading.start();
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "不支持的文件格式",
        desc:
          "所选文件‘ " +
          file.name +
          " ’格式不正确, 请选择 " +
          this.accept +
          " 格式文件",
      });
    },
    handleMaxSize(file) {
      // :max-size="maxSize * 1024"

      this.$Notice.warning({
        title: "文件大小过大",
        desc:
          "所选文件‘ " +
          file.name +
          " ’大小过大, 不得超过 " +
          this.maxSize +
          "M.",
      });
    },

    handleSuccess(res, file) {
      if (res.success) {
        console.log(file, "上传成功");
        this.formValidate.name = file.name;
        this.docdetail.fileName = file.name;
        this.docdetail.fileUrl = file.response.result;
        this.getdetail(file.response.result);
      } else {
        this.$Message.error(res.message);
      }
    },
    getdetail(url) {
      let id = url.split("/").pop();
      getfilepageById({
        id: url,
      }).then((res) => {
        console.log("打印详情：", res);
        this.docdetail.pageNum = res.result;
        this.$Loading.finish();
      });
    },
  },
};
</script>

<style>
</style>